<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>基于爬虫的商品监控与分析系统</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
        <!-- basic styles -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="assets/css/font-awesome.min.css" />

        <!--[if IE 7]>
          <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
        <![endif]-->

        <!-- page specific plugin styles -->


        <!-- ace styles -->

        <link rel="stylesheet" href="assets/css/ace.min.css" />
        <link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
        <link rel="stylesheet" href="assets/css/ace-skins.min.css" />
        <link rel="stylesheet" href="assets/css/bootstrap-table.css" />

        <!--[if lte IE 8]>
          <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
        <![endif]-->

        <!-- inline styles related to this page -->

        <!-- ace settings handler -->

        <script src="assets/js/ace-extra.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

        <!--[if lt IE 9]>
        <script src="assets/js/html5shiv.js"></script>
        <script src="assets/js/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        <div class="navbar navbar-default" id="navbar">
            <script type="text/javascript">
                try{ace.settings.check('navbar' , 'fixed')}catch(e){}
            </script>

            <div class="navbar-container" id="navbar-container">
                <div class="navbar-header pull-left">
                    <a href="#" class="navbar-brand">
                        <small>
                            <i class="icon-leaf"></i>
                            基于爬虫的商品监控与分析系统
                        </small>
                    </a><!-- /.brand -->
                </div><!-- /.navbar-header -->

                <div class="navbar-header pull-right" role="navigation">
                    <ul class="nav ace-nav">
                        <li class="light-blue">
                            <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                                <img class="nav-user-photo" src="assets/avatars/user.jpg" alt="Jason's Photo" />
                                <span class="user-info">
                                    <small>欢迎光临</small>
                                </span>

                                <i class="icon-caret-down"></i>
                            </a>

                            <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                                <li>
                                    <a href="login.html">
                                        <i class="icon-off"></i>
                                        退出
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul><!-- /.ace-nav -->
                </div><!-- /.navbar-header -->
            </div><!-- /.container -->
        </div>

        <div class="main-container" id="main-container">
            <script type="text/javascript">
                try{ace.settings.check('main-container' , 'fixed')}catch(e){}
            </script>

            <div class="main-container-inner">
                <a class="menu-toggler" id="menu-toggler" href="#">
                    <span class="menu-text"></span>
                </a>

                <div class="sidebar" id="sidebar">
                    <script type="text/javascript">
                        try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
                    </script>

                    <ul class="nav nav-list">
                        <li>
                            <a href="user.html">
                                <i class="icon-edit"></i>
                                <span class="menu-text"> 用户管理 </span>
                            </a>
                        </li>
                        <li>
                            <a href="crawler.html">
                                <i class="icon-list-alt"></i>
                                <span class="menu-text"> 数据获取 </span>
                            </a>
                        </li>
                        <li>
                            <a href="goods.html" class="dropdown-toggle">
                                <i class="icon-desktop"></i>
                                <span class="menu-text"> 商品监控 </span>
                            </a>
                        </li>

                        <li class="active">
                            <a href="#" class="dropdown-toggle">
                                <i class="icon-tag"></i>
                                <span class="menu-text"> 监控记录 </span>
                            </a>
                        </li>

                        <li>
                            <a href="store.html" class="dropdown-toggle">
                                <i class="icon-list"></i>
                                <span class="menu-text"> 店铺分析 </span>
                            </a>
                        </li>

                        
                    </ul><!-- /.nav-list -->

                    <div class="sidebar-collapse" id="sidebar-collapse">
                        <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
                    </div>

                    <script type="text/javascript">
                        try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
                    </script>
                </div>

                <div class="main-content">
                    <div class="breadcrumbs" id="breadcrumbs">
                        <script type="text/javascript">
                            try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
                        </script>

                        <ul class="breadcrumb">
                            <li>
                                <i class="icon-home home-icon"></i>
                                <a href="#">首页</a>
                            </li>
                            <li class="active">监控记录</li>
                        </ul><!-- .breadcrumb -->

                    </div>

                    <div class="page-content">
                        <div class="page-header">
                            <h1>
                                监控记录
                                <small>
                                    <i class="icon-double-angle-right"></i>
                                     查看
                                </small>
                            </h1>
                        </div><!-- /.page-header -->

                        <div class="row">
                            <div class="col-xs-12">
                                <!-- PAGE CONTENT BEGINS -->

                                <div class="alert alert-block alert-success">
                                    <button type="button" class="close" data-dismiss="alert">
                                        <i class="icon-remove"></i>
                                    </button>

                                    <i class="icon-ok green"></i>

                                    点击表格可以查看价格曲线哦.  
                                </div>
                                <!-- 搜索框 -->
                                <div class="panel-body">
                                    <form role="form" id="searchForm" class="form-inline">
                                        <div class="form-group"> <input type="text"
                                                class="form-control" id="crawler" name="crawler" placeholder="请输入监控商品类别">
                                        </div>
                                        <div class="form-group">
                                            <button type="button" id="searchBtn" class="btn btn-default">开始筛选</button>
                                        </div>
                                    </form>
                                </div>
                                <table id="table" style="table-layout: fixed;word-break:break-all;"></table>
                                <!-- PAGE CONTENT ENDS -->
                            </div><!-- /.col -->
                        </div> <!-- /.row -->
                    </div><!-- /.page-content -->
                </div><!-- /.main-content -->
            </div><!-- /.main-container-inner -->


            <!-- 操作模态框 -->
            <div class="modal fade" id="opDataxJobRowModal" tabindex="-1" role="dialog" >
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">价格趋势</h4>
                  </div>
                  <div id="loading" style="height: 400px;">
                    <div id="container" style="height: 100%; width: 100%"></div>
                  </div>
                  <div style="text-align:center;margin: 0 auto;">
                    <button type="button" class="btn btn-success" id="dayButton">日价格</button>
                    <button type="button" class="btn btn-success" id="weekButton">周价格</button>
                    <button type="button" class="btn btn-success" id="monthButton">月价格</button>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-danger" id="modalconfirm">确定</button>
                  </div>
                </div>
              </div>
            </div>

            <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
                <i class="icon-double-angle-up icon-only bigger-110"></i>
            </a>
        </div><!-- /.main-container -->

        <!-- basic scripts -->


        <!--[if !IE]> -->

        <script type="text/javascript">
            window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"script>");
        </script>

        <!-- <![endif]-->

        <!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"script>");
</script>
<![endif]-->

        <script type="text/javascript">
            if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"script>");
        </script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/typeahead-bs2.min.js"></script>

        <!-- page specific plugin scripts -->

        <!--[if lte IE 8]>
          <script src="assets/js/excanvas.min.js"></script>
        <![endif]-->

        <script src="assets/js/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="assets/js/jquery.ui.touch-punch.min.js"></script>
        <script src="assets/js/jquery.slimscroll.min.js"></script>
        <script src="assets/js/jquery.easy-pie-chart.min.js"></script>
        <script src="assets/js/jquery.sparkline.min.js"></script>

        <!-- ace scripts -->

        <script src="assets/js/ace-elements.min.js"></script>
        <script src="assets/js/ace.min.js"></script>
        <script src="assets/js/table/bootstrap-table.js"></script>
        <script src="assets/js/table/bootstrap-table-zh-CN.js"></script>

        <!-- inline scripts related to this page -->

        <script type="text/javascript">
            var myChart='';
            var dom = '';
            var xValue = [];
            var yValue = [];
            // 通用初始化模板
            function initEcharts(valueX, valueY){
                myChart = echarts.init(dom);
                var app = {};
                var option;
                option = {
                    xAxis: {
                        type: 'category',
                        data: valueX
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: valueY,
                        type: 'line'
                    }],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    }
                };

                if (option && typeof option === 'object') {
                    myChart.setOption(option,true);
                }
            }
            // 初始化表格数据
            $(function(){
                $('#table').bootstrapTable("showLoading");
                $.ajax({ 
                    url: "http://127.0.0.1:8082/api/crawler/add_goods_to_monitoring/",
                    method: "get",
                    dataType: "json",
                    success: function(rs){
                        var message = rs.results
                        $('#table').bootstrapTable('load', message);
                        $('#table').bootstrapTable('refresh');
                        $('#table').bootstrapTable("hideLoading");
                    },
                })
            });
            // 初始化表格
            $('#table').bootstrapTable({
                cache:false,
                clickToSelect:true,
                pageSize: 15,
                pageNumber: 1,
                pagination: true,
                columns: [{
                    field: 'crawler',
                    title: '监控编号'
                }, {
                    field: 'address',
                    title: '商品地址'
                }, {
                    field: 'name',
                    title: '商品名称'
                }, {
                    field: 'shop',
                    title: '商品店铺'
                }, {
                    field: 'keyboard',
                    title: '商品类别'
                }],
                onClickRow: function (row) {
                    dom = document.getElementById("container");
                    $("#opDataxJobRowModal").modal('toggle');
                    $.ajax({
                        type: "get",
                        url: "http://127.0.0.1:8082/api/crawler/monitoring_goods_price/",
                        cache: false,
                        data: {monitoring_goods_id : row.crawler},
                        success : function(res) {
                            loading.style.display=""
                            var result = res.results
                            if(result.length == 0){
                                $("#opDataxJobRowModal").modal('toggle');
                                alert("暂无数据，请耐心等待")
                            } else {
                                for (var i=0; i<result.length;i++){
                                    yValue.push(parseInt(result[i].price))
                                    var newDate=/\d{4}-\d{1,2}-\d{1,2}/g.exec(result[i].add_time)
                                    xValue.push(newDate)
                                }
                                initEcharts(xValue, yValue);
                            }
                        }
                    });
                }
            });
            // 搜索
            $("#searchBtn").click(function() {
                $('#table').bootstrapTable("showLoading");
                var crawler = $("#crawler").val();
                $.ajax({
                     type: "get",
                     url: "http://127.0.0.1:8082/api/crawler/add_goods_to_monitoring/",
                     cache: false,
                     data: {keyboard : crawler},
                     success : function(res) {
                        var message1 = res.results
                        $("#table").bootstrapTable('load', message1);//主要是要这种写法
                        $('#table').bootstrapTable('refresh');
                        $('#table').bootstrapTable("hideLoading");
                    }
                });

            });
            // 日价格
            $("#dayButton").click(function() {
                myChart.clear();
                myChart = '';
                data = [];
                var valueX = ['8:00', '12:00', '18:00'];
                var valueY = [];
                for (var i=0; i<3;i++){
                    valueY.push(yValue.slice(-1)[0]);
                }
                initEcharts(valueX, valueY);
            });
            // 周价格
            $("#weekButton").click(function() {
                myChart.clear();
                myChart = '';
                data = [];
                var valueX = xValue;
                var valueY = yValue;
                if(xValue.length >= 7){
                    valueX = xValue.slice(-7);
                    valueY = yValue.slice(-7);
                }
                initEcharts(valueX, valueY);
            });
            // 周价格
            $("#monthButton").click(function() {
                myChart.clear();
                myChart = '';
                data = [];
                var valueX = xValue;
                var valueY = yValue;
                if(xValue.length >= 30){
                    valueX = xValue.slice(-30);
                    valueY = yValue.slice(-30);
                }
                initEcharts(valueX, valueY);
            });
            // 关闭模态框
            $("#modalconfirm").click(function() {
                myChart.clear();
                $("#opDataxJobRowModal").modal('toggle');
            });

            $('#modal').on('hidden.bs.modal', function () {
                myChart.clear();
                myChart = '';
                data = [];
            })
        </script>
</body>
</html>

